<div class="upload-wrapper">
    <nz-empty *ngIf="!editable && (!picture_list || picture_list.length === 0)"></nz-empty>
    <div class="img-card" *ngIf="!editable">
        <div class="catalog-picture" *ngFor="let picture of picture_list;">
            <a class="img-container" [href]="picture.url" data-fancybox="images">
                <img class="img-responsive" [src]="picture.url"/>
            </a>
        </div>
    </div>
    <div class="picture-container upload-card" *ngIf="editable">
        <div class="clearfix">
            <nz-upload [nzAction]="url" nzListType="picture-card" [(nzFileList)]="picture_list" [nzRemove]="deletePic" [nzCustomRequest]="customReq" [ngClass]="{'project-picture':true}" [nzShowButton]="editable && picture_list.length < amount" [nzPreview]="handlePreview">
                <i nz-icon nzType="plus"></i>
                <div>上传图片</div>
            </nz-upload>

            <nz-modal [nzVisible]="preview_visible" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="null" [nzWidth]="720" (nzOnCancel)="preview_visible = false">
                <ng-template #modalTitle>
                    照片预览
                </ng-template>
                <ng-template #modalContent>
                    <div class="image-preview">
                        <img [src]="preview_image" [ngStyle]="{ 'max-width': '100%','max-height':'100%' }"/>
                    </div>
                </ng-template>
            </nz-modal>
        </div>
    </div>
</div>
